<script setup>
import {ref} from 'vue';

const goodsList = ref([
  {
    id: 1,
    name: 'KN95级莫兰迪色防护口罩',
    price: 79,
    img: require('@/assets/images/goods1.png')
  },
  {
    id: 2,
    name: 'KN95级莫兰迪色防护口罩',
    price: 566,
    img: require('@/assets/images/goods2.png')
  },
  {
    id: 3,
    name: '法拉蒙高颜值记事本可定制',
    price: 58,
    img: require('@/assets/images/goods3.png')
  },
  {
    id: 4,
    name: '科技布布艺沙发',
    price: 3759,
    img: require('@/assets/images/goods4.png')
  }
]);
</script>

<template>
  <li class="base-goods-item" v-for="item in goodsList" :key="item.id">
    <a href="#">
      <div class="pic"><img :src="item.img" :alt="item.name"/></div>
      <div class="txt">
        <h4>{{ item.name }}</h4>
        <p>¥ <span>{{ item.price }}</span></p>
      </div>
    </a>
  </li>
</template>

<style scoped>
.base-goods-item li {
  width: 304px;
  height: 404px;
  background-color: #EEF9F4;
}

.base-goods-item li {
  display: block;
}

.base-goods-item li .pic {
  width: 304px;
  height: 304px;
}

.base-goods-item li .txt {
  text-align: center;
}

.base-goods-item li h4 {
  margin-top: 17px;
  margin-bottom: 8px;
  font-size: 20px;
}

.base-goods-item li p {
  font-size: 18px;
  color: #AA2113;
}

.base-goods-item li p span {
  font-size: 22px;
}
</style>